// el-table-sticky插件遗留问题处理
export default {
  data() {
    return {
      // 当前是否处于移动端
      isMobile: null,
      // 设置设备宽度发生变化后微调指数,让列表宽度进行动态微调
      slightWidth: 0,
      // 延迟器对象
      timerOut:null
    };
  },
  created() {
    // 初始组件实例创建完成调用一次
    this.detectDeviceType();
  },
  watch: {
    'sidebar.opened':{
      handler() {
        // sidebar的opened变化后重新设置微调参数
        this.changeSlightWidth();
        // 每次清空延迟器
        this.timerOut && clearTimeout(this.timerOut);
        this.timerOut = setTimeout(() => {
          this.changeSlightWidth();
        }, 100);
      },
      deep: true,
    }
  },
  mounted() {
    // 加载完成后绑定视口宽度变化事件
    window.addEventListener("resize", this.detectDeviceType);
  },
  beforeDestroy() {
    // 卸载前清除监听事件
    window.removeEventListener("resize", this.detectDeviceType);
    // 组件销毁前每次清空延迟器
    this.timerOut && clearTimeout(this.timerOut);
  },
  activated() {
    // 组件被激活重新设置微调参数
    this.slightWidth = this.slightWidth === 0 ? 0.1 : 0;
  },
  methods: {
    // 监听设备宽度判断当前环境
    detectDeviceType(value) {
      // 频繁触发slightWidth更新，让其重新计算列表项宽度，从而解决滚动条丢失问题
      this.slightWidth = this.slightWidth === 0 ? 0.1 : 0;
      if (window.innerWidth <= 767) {
        this.isMobile = true;
      } else {
        this.isMobile = false;
      }
    },
    // 改变微调参数
    changeSlightWidth() {
      this.slightWidth = this.slightWidth === 0 ? 0.1 : 0;
    },
  },
};
